<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./libs/vue.js"></script>
</head>
<body>
    <!-- 
        面试题：
            v-text 和 v-html 区别：
                v-text只能原样输出变量，v-html可以解析变量中的标签结构
                如果需要解析标签结构用v-html, 否则全都用v-text
     -->
    <div id="app">
        <!-- 插值表达式 -->
        <h1>{{msg}}</h1>
        <hr>
        <!-- v-text 指令 -->
        <!-- 
            指令是vue提供更加易于操作数据和方法的方式
            指令的本质是函数，调用方式当成自定义属性来调用
         -->
        <h1 v-html="msg+'~~'"></h1>
        <!-- 系统自带方法 -->
        <h1 v-html="msg.toUpperCase()"></h1>
        <!-- 自定义方法 -->
        <h1 v-html="reverse(msg)"></h1>
        <!-- 三目运算 -->
        <h1 v-html="age>=18?'成年':'孩子'"></h1>
        <!-- 插值表达式的优势 -->
        <p>
            qwrjkfqjklfwqklfwq==={{msg}}====fhkwqfhklwqfklwqhflwq
        </p>
        <p>
            qwrjkfqjklfwqklfwq===<span v-html="msg"></span>====fhkwqfhklwqfklwqhflwq
        </p>
        <!-- 套入模板 -->
        <div v-html="content"></div>
        <hr>
        <!-- <img src="{{imgUrl}}" alt=""> -->
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                msg:'hello world',
                age:20,
                content:`
                    <h3>我是h3标签</h3>
                `,
                imgUrl:'./imgs/01.jpg'
            },
            methods: {
                reverse(val){
                    return val.split('').reverse().join('')
                }
            },
        })
    </script>
</body>
</html>